<template>
	<view class="container">
		<view class="exam-paper-content">
			<view class="exam-header">
				<view class="exam-number">
					<text class="this-num">{{examData.number.thisNum}}.</text>
				</view>
				<view class="exam-type">
					<text>{{examData.questionType}}</text>
					<view class="btn">
						<image src="../../../../static/icons/store.png" mode="" class="collection" @click="changeImg" v-show="showUpImg"></image>
						<image src="../../../../static/icons/store1.png" mode="" class="collection" @click="changeImg" v-show="!showUpImg"></image>
					</view>
				</view>
			</view>

			<view class="exam-question">
				<text>{{examData.question}}</text>
			</view>

			<view class="exam-radio">
				<view class="exam-option"  v-for="(item, index) in examData.options" :key="index" >
					<text class="chooseVal" :class="examData.choose==item.val ? 'active' : ''" 
					@click="chooseOption" :data-val="item.val" >{{item.val}}</text> 
					<text>{{item.content}}</text>
				</view>
			</view>
		</view>
		
		<view class="footer">
				<view class="btn prev" @click="onPreQuestion" v-if="examData.number.thisNum>1">
				    <image src="../../../../static/icons/prev.png" mode=""></image>
					<text>上一题</text>
				</view>
				<view class="exam-number">
					<text class="this-num">{{examData.number.thisNum}}</text>
					<text style="margin: 0 5rpx;">/</text>
					<text>{{examData.number.allNumber}}</text>
					<text class="answer">答题卡</text>
				</view>
				<view class="btn next" @click="onNextQuestion" v-if="examData.number.thisNum < examData.number.allNumber">
					<text>下一题</text>
					<image src="../../../../static/icons/next.png" mode=""></image>
				</view>
				<view class="btn submit" @click="onSumbitExam" v-else>
					<image src="../../../../static/icons/submit.png" mode=""></image>
					<text>提交试卷</text>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUpImg:true,
				examData: {
					isFav: false,
					number: {
						thisNum: 1,
						allNumber: 2
					},
					questionType: '单选题',
					question: '"感时花溅泪"下一句是什么？()',
					choose: 'A',
					options: [{
						content: '明月即使有',
						val: 'A'
					}, {
						content: '恨别鸟惊心',
						val: 'B'
					}, {
						content: '只识弯弓射大雕',
						val: 'C'
					}, {
						content: '失败是成功之母',
						val: 'D'
					}]
				}
			};
		},
		methods: {
			onPreQuestion(){
				this.examData = {
					isFav: false,
					number: {
						thisNum: 1,
						allNumber: 2
					},
					questionType: '单选题',
					question: '"感时花溅泪"下一句是什么？()',
					choose: 'A',
					options: [{
						content: '也无风雨也无晴',
						val: 'A'
					}, {
						content: '明月即使有',
						val: 'B'
					}, {
						content: '恨别鸟惊心',
						val: 'C'
					}, {
						content: '只识弯弓射大雕',
						val: 'D'
					}]
				}
			},
			onNextQuestion(){
				this.examData = {
					isFav: false,
					number: {
						thisNum: 2,
						allNumber: 2
					},
					questionType: '单选题',
					question: '"恨别鸟惊心"上一句是什么？()',
					choose: 'A',
					options: [{
						content: '也无风雨也无晴',
						val: 'A'
					}, {
						content: '明月即使有',
						val: 'B'
					}, {
						content: '恨别鸟惊心',
						val: 'C'
					}, {
						content: '只识弯弓射大雕',
						val: 'D'
					}]
				}
			},
			chooseOption(e) {
				this.examData.choose = e.currentTarget.dataset.val;
			},
			changeImg(){
				this.showUpImg = !this.showUpImg 
			},
			onSumbitExam(){
				uni.showModal({
					title: '提示',
					content:"确定提交考试吗？",
					success: function (res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
							} 
						}
				})
			},
			onQuitExam(){
				uni.showModal({
					title: '提示',
					content:"确定退出考试吗？",
					success: function (res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
							} 
						}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
		
		letter-spacing: 1px;
	}
</style>
<style lang="scss" scoped>
	.container{
		padding-top: 30rpx;
		font-family: Arial, Verdana, "Microsoft Yahei","Pingfang SC", Simsun;
	}
	.exam-paper-content {
		padding-left: 20px;
		padding-right: 20px;
		margin: 10px;
		.exam-header {
			display: flex;
			align-items: center;
			height: 60rpx;
			line-height: 60rpx;
			.exam-number {
				font-size: 16px;
				.this-num {
					color: #a7a7a7;
				}
			}

			.exam-type {
				margin-left: 16rpx;
				height: 40px;
				line-height: 40px;
				color:  #a7a7a7;
				width: 100%;
				text{
					display: inline-block;
					float: left;
				}
				.btn{
					float: right;
					.collection{
						width: 20px;
						height: 20px;
						vertical-align: middle;
					}
				}
			}
		}

		.exam-question {
			margin: 20px 0 90px ;
		}
		.exam-radio {
			margin-bottom: 50px;
			
			.exam-option {
				height: 30px;
				line-height: 30px;
				padding: 22rpx 30rpx;
				border-radius: 60rpx;
				margin-bottom: 22rpx;
				.chooseVal{
					border: 1px solid #229DDD;
					width: 30px;
					height: 30px;
					border-radius: 50%;
					display: inline-block;
					text-align: center;
					color:#229DDD;
					margin-right: 10px;
				}
				.active {
					background:#229DDD ;
					border: 1px solid #fff;
					color: #fff;
				}
			}
			
		}

	}
	
	
	.footer {
		height: 50px;
		background: #fff;
		margin: 20px 15px 0 15px;
		border-radius: 10px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 14px;
		color: #229DDD;
		position: relative;
		box-shadow: 0 3px 2px  0 #dedede;
		.exam-number{
			float: left;
			height: 50px;
			width: 50px;
			position: absolute;
			left: 280rpx;
			top:5px;
			text-align: center;
			.answer{
				
				display:inline-block;
			}
		}
		.next {
			float: right;
			line-height: 50px;
			text{
				display: inline-block;
				margin-right:5px ;
			}
		}
		.prev{
			float: left;
			line-height: 50px;
				text{
					display: inline-block;
					margin-left:5px ;
				}
			}
		image{
			width: 10px;
			height: 10px;
		}
		.submit{
			float: right;
			line-height: 50px;
			text{
				
				display: inline-block;
				margin-left:5px ;
			}
			image{
				width: 15px;
				height: 15px;
				display: inline-block;
				vertical-align: middle;
			}
		}
	}
</style>

